<template>
  <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
    <div class="salesCard">
      <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
        <template #rightExtra>
          <div class="extra-wrapper">
            <a-range-picker :style="{ width: '256px' }" />
          </div>
        </template>
        <a-tab-pane loading="true" tab="项目量" key="1">
          <a-row>
            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
              <Bar :chartData="barData" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor"  />
            </a-col>
            <a-col :xl="8" :lg="6" :md="6" :sm="12" :xs="12">
              <RankList title="子项目" :list="rankList" /><!-- 项目名称  付款进度  金额-->
            </a-col>
          </a-row>
        </a-tab-pane>

      </a-tabs>



<!--      <template v-for="item in navItems" :key="item">
        <CardGrid>
        <span class="flex flex-col items-center relative">
          <Icon :icon="item.icon" :color="item.color" size="20" />
          &lt;!&ndash; 动态绑定待办数量 &ndash;&gt;
          <span v-if="item.count > 0" class="absolute top-0 right-0 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">
            {{item.count}}
          </span>
          <span class="text-md mt-2">{{ item.title }}</span>
        </span>
        </CardGrid>
      </template>-->

    </div>
  </a-card>


</template>
<script lang="ts" setup>

import { ref, computed, watch } from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import RankList from '/@/components/chart/RankList.vue';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { getPaymentRequestChartList, getSubProjectBarData, getSubProjectListData } from '@/views/common.api';
import { navItems } from '@/views/dashboard/workbench/components/data';
import { Card } from 'ant-design-vue';
import QuickNav from '@/views/dashboard/Analysis/components/QuickNav.vue';
    



const props = defineProps({
  projectId: {
    type: [String, Number],
    required: false,
  },
  loading: {
    type: Boolean,
  },
});

  const { getThemeColor } = useRootSetting();
/*  const rankList = [];
  for (let i = 0; i < 7; i++) {
    rankList.push({
      name: '白鹭岛 ' + (i + 1) + ' 号店',
      total: 1234.56 - i * 100,
    });
  }*/


 /* for (let i = 0; i < 12; i += 1) {
    barData.push({
      name: `${i + 1}月2`,
      value: Math.floor(Math.random() * 1000) + 200,
    });
  }*/
  const seriesColor = computed(() => {
    return getThemeColor.value
  })

const projectIds = ref();

watch([() => props.projectId], ([projectId]) => {
  projectIds.value = projectId
  getBarDatadata()
  getRankList()
})

const barData = ref([])
async function getBarDatadata(){
  const params = {'projectId':projectIds.value}
  barData.value = await getSubProjectBarData(params);
}


const rankList = ref([])
async function getRankList(){
  const params = {'projectId':projectIds.value}
  rankList.value = await getSubProjectListData(params);
}

</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }
</style>
